<template>
  <div id="app">
    <!-- 标题栏 -->
    <div class="header">
 
      <h1>我的留言</h1>
    </div>
    
    <!-- 留言内容 -->
    <div class="content">
      <textarea 
        v-model="messageContent" 
        class="message-input"
        placeholder="请输入留言内容"
      ></textarea>
      
      <!-- 按钮区域 -->
      <div class="button-group">
        <button class="submit-button" @click="submitMessage">提交</button>
        <button class="cancel-button" @click="cancelMessage">取消</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MyMessage',
  setup() {
    // 留言内容
    const messageContent = ref('');
    
    // 返回按钮点击事件
    const goBack = () => {
      window.history.back();
    };
    
    // 提交留言
    const submitMessage = () => {
      if (messageContent.value.trim() === '') {
        alert('请输入留言内容');
        return;
      }
      alert('留言提交成功！');
      messageContent.value = '';
    };
    
    // 取消留言
    const cancelMessage = () => {
      messageContent.value = '';
    };
    
    return {
      messageContent,
      goBack,
      submitMessage,
      cancelMessage
    };
  }
};
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  color: #2c3e50;
  padding: 0;
  margin: 0;
  background-color: white;
}

/* 标题栏样式 */
.header {
  background-color: #8bc34a;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.back-button {
  display: flex;
  align-items: center;
  color: white;
  cursor: pointer;
}

.arrow {
  font-size: 20px;
  margin-right: 5px;
}

.back-text {
  font-size: 16px;
}

.header h1 {
  margin: 0;
  font-size: 18px;
  color: white;
}

/* 内容区域样式 */
.content {
  padding: 15px;
}

/* 留言输入框样式 */
.message-input {
  height: 200px;
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid #8bc34a;
  border-radius: 5px;
  font-size: 16px;
  color: #555;
  resize: none;
}

/* 按钮区域样式 */
.button-group {
  display: flex;
  justify-content: space-between;
}

.submit-button, .cancel-button {
  flex: 1;
  padding: 10px;
  margin: 0 5px;
  border: 1px solid #8bc34a;
  border-radius: 5px;
  background-color: white;
  color: #8bc34a;
  font-size: 16px;
  cursor: pointer;
}

.submit-button:hover, .cancel-button:hover {
  background-color: #f5f5f5;
}
</style>